<script setup>
/**
 * 定义组件的props
 * @param {Object} icon - 图标组件对象
 * @param {String} title - 卡片标题
 * @param {String} desc - 卡片描述
 */
defineProps({
  icon: Object,
  title: String,
  desc: String
})
</script>

<template>
  <!-- 卡片容器 -->
  <div class="card">
      <!-- 根据title的存在与否决定是否显示卡片头部 -->
      <div class="card-header" v-if="title">
        <!-- 显示图标和标题 -->
        <div>
          <el-icon style="margin-right:3px;translate: 0 2px">
            <component :is="icon"/>
          </el-icon>
          {{title}}
        </div>

        <!-- 显示描述信息 -->
        <div>
          <div>{{desc}}</div>
        </div>

      </div>
      <!-- 插槽内容，允许在使用卡片组件时插入自定义内容 -->
      <slot/>
  </div>
</template>


<style scoped>
/* 定义卡片的样式 */
.card {
  border-radius: 5px; /* 设置卡片的圆角 */
  background-color: var(--el-bg-color); /* 使用全局变量设置卡片的背景颜色 */
  border: solid 1px var(--el-border-color); /* 使用全局变量设置卡片的边框 */
  box-sizing: border-box; /* 确保卡片的尺寸计算包括内边距 */
  min-height: 20px; /* 设置卡片的最小高度 */
  padding: 10px; /* 设置卡片的内边距 */
}

/* 定义卡片头部的样式 */
.card-header {
  border-bottom: solid 1px var(--el-border-color); /* 使用全局变量设置卡片头部的下边框 */
  padding-bottom: 10px; /* 设置卡片头部的底部内边距 */
  margin-bottom: 10px; /* 设置卡片头部的底部外边距 */
}

/* 定义卡片头部第一个子元素的样式 */
.card-header > :first-child {
  font-size: 18px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
}

/* 定义卡片头部最后一个子元素的样式 */
.card-header > :last-child {
  font-size: 13px; /* 设置字体大小 */
  color: grey; /* 设置字体颜色为灰色 */
}
</style>
